React use Hook: Asynchroon Resourceverbruik onder de knie krijgen

React hooks hebben een revolutie teweeggebracht in de manier waarop we state en side effects beheren in functionele componenten. Een van de krachtigste combinaties is het gebruik van useEffect en useState om asynchroon resourceverbruik, zoals het ophalen van data van een API, af te handelen. Dit artikel duikt dieper in de fijne kneepjes van het gebruik van hooks voor asynchrone operaties, en behandelt best practices, foutafhandeling en prestatieoptimalisatie voor het bouwen van robuuste en wereldwijd toegankelijke React-applicaties.

De basis begrijpen: useEffect en useState

Voordat we in complexere scenario's duiken, laten we eerst de fundamentele hooks die erbij betrokken zijn opnieuw bekijken:

• useEffect: Met deze hook kunt u side effects uitvoeren in uw functionele componenten. Side effects kunnen bestaan uit het ophalen van data, abonnementen of het direct manipuleren van de DOM.
• useState: Met deze hook kunt u state toevoegen aan uw functionele componenten. State is essentieel voor het beheren van data die in de loop van de tijd verandert, zoals de laadstatus of de data die van een API wordt opgehaald.

Het typische patroon voor het ophalen van data omvat het gebruik van useEffect om de asynchrone aanvraag te initiëren en useState om de data, laadstatus en eventuele fouten op te slaan.

Een eenvoudig voorbeeld van data ophalen

Laten we beginnen met een basisvoorbeeld van het ophalen van gebruikersdata van een hypothetische API:

Voorbeeld: Gebruikersdata ophalen

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

In dit voorbeeld haalt useEffect de gebruikersdata op telkens wanneer de userId prop verandert. Het gebruikt een async functie om de asynchrone aard van de fetch API af te handelen. De component beheert ook laad- en foutstatussen om een betere gebruikerservaring te bieden.

Omgaan met laad- en foutstatussen

Het geven van visuele feedback tijdens het laden en het correct afhandelen van fouten zijn cruciaal voor een goede gebruikerservaring. Het vorige voorbeeld demonstreert al de basis van laad- en foutafhandeling. Laten we deze concepten verder uitwerken.

Laadstatussen

Een laadstatus moet duidelijk aangeven dat er data wordt opgehaald. Dit kan worden bereikt met een eenvoudig laadbericht of een meer geavanceerde laadspinner.

Voorbeeld: Een laadspinner gebruiken

In plaats van een eenvoudig tekstbericht, kunt u een laadspinnercomponent gebruiken:

```javascript // LoadingSpinner.js import React from 'react'; function LoadingSpinner() { return

; // Vervang door uw daadwerkelijke spinnercomponent } export default LoadingSpinner; ```

```javascript // UserProfile.js (modified) import React, { useState, useEffect } from 'react'; import LoadingSpinner from './LoadingSpinner'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Dezelfde useEffect als voorheen if (loading) { return ; // Gebruik de laadspinnercomponent } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ... ); // Dezelfde return als voorheen } export default UserProfile; ```

Foutafhandeling

Foutafhandeling moet informatieve berichten aan de gebruiker geven en mogelijk manieren bieden om van de fout te herstellen. Dit kan inhouden dat de aanvraag opnieuw wordt geprobeerd of dat er contactinformatie voor ondersteuning wordt verstrekt.

Voorbeeld: Een gebruiksvriendelijke foutmelding weergeven

```javascript // UserProfile.js (modified) import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Dezelfde useEffect als voorheen if (loading) { return

Loading user data...

; } if (error) { return ( ); } if (!user) { return

No user data available.

; } return ( ... ); // Dezelfde return als voorheen } export default UserProfile; ```

Custom Hooks maken voor herbruikbaarheid

Wanneer u merkt dat u dezelfde logica voor het ophalen van data in meerdere componenten herhaalt, is het tijd om een custom hook te maken. Custom hooks bevorderen de herbruikbaarheid en onderhoudbaarheid van code.

Voorbeeld: useFetch Hook

Laten we een useFetch hook maken die de logica voor het ophalen van data inkapselt:

```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Nu kunt u de useFetch hook in uw componenten gebruiken:

```javascript // UserProfile.js (modified) import React from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

De useFetch hook vereenvoudigt de componentlogica aanzienlijk en maakt het gemakkelijker om de functionaliteit voor het ophalen van data in andere delen van uw applicatie te hergebruiken. Dit is met name handig voor complexe applicaties met tal van data-afhankelijkheden.

Prestaties optimaliseren

Asynchroon resourceverbruik kan de prestaties van de applicatie beïnvloeden. Hier zijn verschillende strategieën om de prestaties te optimaliseren bij het gebruik van hooks:

1. Debouncing en Throttling

Bij het omgaan met vaak veranderende waarden, zoals zoekinvoer, kunnen debouncing en throttling overmatige API-aanroepen voorkomen. Debouncing zorgt ervoor dat een functie pas na een bepaalde vertraging wordt aangeroepen, terwijl throttling de snelheid beperkt waarmee een functie kan worden aangeroepen.

Voorbeeld: Een zoekinvoer debouncen```javascript import React, { useState, useEffect } from 'react'; import useFetch from './useFetch'; function SearchComponent() { const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); useEffect(() => { const timerId = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms vertraging return () => { clearTimeout(timerId); }; }, [searchTerm]); const { data: results, loading, error } = useFetch(`https://api.example.com/search?q=${debouncedSearchTerm}`); const handleInputChange = (event) => { setSearchTerm(event.target.value); }; return (

); } export default SearchComponent; ```

In dit voorbeeld wordt de debouncedSearchTerm pas bijgewerkt nadat de gebruiker 500ms is gestopt met typen, waardoor onnodige API-aanroepen bij elke toetsaanslag worden voorkomen. Dit verbetert de prestaties en vermindert de serverbelasting.

2. Caching

Het cachen van opgehaalde data kan het aantal API-aanroepen aanzienlijk verminderen. U kunt caching op verschillende niveaus implementeren:

• Browsercache: Configureer uw API om de juiste HTTP-cachingheaders te gebruiken.
• In-Memory Cache: Gebruik een eenvoudig object om opgehaalde data binnen uw applicatie op te slaan.
• Permanente opslag: Gebruik localStorage of sessionStorage voor caching op langere termijn.

Voorbeeld: Een eenvoudige in-memory cache implementeren in useFetch

```javascript // useFetch.js (modified) import { useState, useEffect } from 'react'; const cache = {}; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); if (cache[url]) { setData(cache[url]); setLoading(false); return; } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); cache[url] = jsonData; setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Dit voorbeeld voegt een eenvoudige in-memory cache toe. Als de data voor een bepaalde URL al in de cache zit, wordt deze direct uit de cache gehaald in plaats van een nieuwe API-aanroep te doen. Dit kan de prestaties voor vaak opgevraagde data drastisch verbeteren.

3. Memoization

React's useMemo hook kan worden gebruikt om dure berekeningen die afhankelijk zijn van de opgehaalde data te memoizen. Dit voorkomt onnodige re-renders wanneer de data niet is veranderd.

Voorbeeld: Een afgeleide waarde memoizen

```javascript import React, { useMemo } from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); const formattedName = useMemo(() => { if (!user) return ''; return `${user.firstName} ${user.lastName}`; }, [user]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

In dit voorbeeld wordt de formattedName alleen opnieuw berekend wanneer het user-object verandert. Als het user-object hetzelfde blijft, wordt de gememoizede waarde geretourneerd, wat onnodige berekeningen en re-renders voorkomt.

4. Code Splitting

Met code splitting kunt u uw applicatie opbreken in kleinere stukjes, die op aanvraag kunnen worden geladen. Dit kan de initiële laadtijd van uw applicatie verbeteren, vooral voor grote applicaties met veel afhankelijkheden.

Voorbeeld: Een component lazy loaden

```javascript import React, { lazy, Suspense } from 'react'; const UserProfile = lazy(() => import('./UserProfile')); function App() { return ( Loading user profile...

}> ); } export default App; ```

In dit voorbeeld wordt de UserProfile-component alleen geladen wanneer deze nodig is. De Suspense-component biedt een fallback-UI terwijl de component wordt geladen.

Omgaan met Race Conditions

Race conditions kunnen optreden wanneer meerdere asynchrone operaties worden gestart in dezelfde useEffect-hook. Als de component unmount voordat alle operaties zijn voltooid, kunt u fouten of onverwacht gedrag tegenkomen. Het is cruciaal om deze operaties op te schonen wanneer de component unmount.

Voorbeeld: Race Conditions voorkomen met een opschoonfunctie

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; // Voeg een vlag toe om de mount-status van de component bij te houden const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (isMounted) { // Werk de state alleen bij als de component nog steeds gemount is setUser(data); } } catch (error) { if (isMounted) { // Werk de state alleen bij als de component nog steeds gemount is setError(error); } } finally { if (isMounted) { // Werk de state alleen bij als de component nog steeds gemount is setLoading(false); } } }; fetchData(); return () => { isMounted = false; // Zet de vlag op false wanneer de component unmount }; }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return (

{user.name}

Email: {user.email}

Location: {user.location}

); } export default UserProfile; ```

In dit voorbeeld wordt een vlag isMounted gebruikt om bij te houden of de component nog steeds gemount is. De state wordt alleen bijgewerkt als de component nog steeds gemount is. De opschoonfunctie zet de vlag op false wanneer de component unmount, wat race conditions en memory leaks voorkomt. Een alternatieve aanpak is het gebruik van de `AbortController` API om de fetch-aanvraag te annuleren, wat vooral belangrijk is bij grotere downloads of langlopende operaties.

Globale overwegingen voor asynchroon resourceverbruik

Bij het bouwen van React-applicaties voor een wereldwijd publiek, moet u rekening houden met deze factoren:

• Netwerklatentie: Gebruikers in verschillende delen van de wereld kunnen te maken krijgen met wisselende netwerklatentie. Optimaliseer uw API-eindpunten voor snelheid en gebruik technieken zoals caching en code splitting om de impact van latentie te minimaliseren. Overweeg het gebruik van een CDN (Content Delivery Network) om statische assets te serveren vanaf servers die dichter bij uw gebruikers staan. Als uw API bijvoorbeeld in de Verenigde Staten wordt gehost, kunnen gebruikers in Azië aanzienlijke vertragingen ervaren. Een CDN kan uw API-reacties op verschillende locaties cachen, waardoor de afstand die de data moet afleggen wordt verkleind.
• Datalokalisatie: Houd rekening met de noodzaak om data te lokaliseren, zoals datums, valuta's en getallen, op basis van de locatie van de gebruiker. Gebruik internationalisatie (i18n) bibliotheken zoals react-intl om dataformattering af te handelen.
• Toegankelijkheid: Zorg ervoor dat uw applicatie toegankelijk is voor gebruikers met een handicap. Gebruik ARIA-attributen en volg best practices voor toegankelijkheid. Geef bijvoorbeeld alternatieve tekst voor afbeeldingen en zorg ervoor dat uw applicatie met een toetsenbord te navigeren is.
• Tijdzones: Wees u bewust van tijdzones bij het weergeven van datums en tijden. Gebruik bibliotheken zoals moment-timezone om tijdzoneconversies af te handelen. Als uw applicatie bijvoorbeeld evenementtijden weergeeft, zorg er dan voor dat u deze converteert naar de lokale tijdzone van de gebruiker.
• Culturele gevoeligheid: Wees u bewust van culturele verschillen bij het weergeven van data en het ontwerpen van uw gebruikersinterface. Vermijd het gebruik van afbeeldingen of symbolen die in bepaalde culturen als beledigend kunnen worden ervaren. Raadpleeg lokale experts om ervoor te zorgen dat uw applicatie cultureel geschikt is.

Conclusie

Het beheersen van asynchroon resourceverbruik in React met hooks is essentieel voor het bouwen van robuuste en performante applicaties. Door de basis van useEffect en useState te begrijpen, custom hooks voor herbruikbaarheid te maken, de prestaties te optimaliseren met technieken zoals debouncing, caching en memoization, en race conditions af te handelen, kunt u applicaties creëren die een geweldige gebruikerservaring bieden voor gebruikers over de hele wereld. Denk er altijd aan om rekening te houden met wereldwijde factoren zoals netwerklatentie, datalokalisatie en culturele gevoeligheid bij het ontwikkelen van applicaties voor een wereldwijd publiek.

Verdere bronnen

• React useEffect Documentatie
• React useState Documentatie
• useHooks.com - Een verzameling herbruikbare React Hooks
• Fetch API Documentatie